<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<currentTime :current-time="currentTime"></currentTime>
				</div>
				<div class="flex-end-center-wrap">
					<!-- <div><el-button type="warning" class="item-gap" size="small" :loading="exportLoading" @click="onReportBtn">导出</el-button></div> -->
					<jk-select v-model="searchParams.workshopId" :option-list="workshopList" clearable placeholder="区域" size="small" class="search-bar-item-size1 margin-5-0 item-gap">
					</jk-select>
					<jk-select v-model="searchParams.processCode" value-key-name="code" :option-list="processList" placeholder="工序" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.code" placeholder="设备名称" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @change="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button class="" @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<component
				:is="viewType"
				:loading="tableLoading"
				:search-params="searchParams"
				:table-data="tableData"
				:height="tableHeight + 20"
			>
			</component>
			<!-- 分页组件 -->
			<!-- <footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPage"
				/>
			</footer> -->
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { formatDate, formatTime, pageConfig } from '/src/utils/jk/jk-tool';
    import permissionMixin from '../../../mixins/permission-mixin';
    import { getInfo } from '../../../api/login';
    import listView from './components/list-view';
    import { iotMachine } from '../../../api/energy/equipmentEnergyMonitoring';
    // import scheduleShift from '../scheduleShiftProductionReport/scheduleShift';
    import currentTime from '@/views/productionMonitor/equipmentMonitoring/components/current-time.vue';
    export default {
        name: 'EquipmentEnergyMonitoring',
        mixins: [permissionMixin, calHeight],
        components: {
            currentTime,
            listView
        },
        data() {
            return {
                prefix: '',
                viewType: 'listView',
                processList: [],
                workshopList: [],
                dataId: null,
                tableLoading: false,
                exportLoading: false,
                tableData: [],
                searchParams: {
                    workshopId: '',
                    processCode: '',
                    code: ''
                },
                currentTime: '',
                interVal2: {},
                interVal: {}
                // scheduleShiftList: {}
            };
        },
        methods: {
            runTime() {
                this.currentTime = formatTime(Date.now());
                clearInterval(this.interVal2);
                this.interVal2 = setInterval(() => {
                    this.currentTime = formatTime(Date.now());
                }, 1000);
            },
            runData() {
                this.getListRequest();
                clearInterval(this.interVal);
                this.interVal = setInterval(() => {
                    this.getListRequest();
                }, 10000);
            },
            clearTimer() {
                clearInterval(this.interVal);
                clearInterval(this.interVal2);
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                iotMachine(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.searchParams.count = res.data.count;
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                // this.searchParams.pageNo = 1;
                // this.searchParams.count = 1;
                this.getListRequest();
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                    return v[j];
                }));
            },
            /** 导出按钮操作 */
            onReportBtn() {
                const params = { ...this.searchParams };
                // params.pageNo = 1;
                // params.pageSize = 500;
                this.$modal.confirm('是否确认导出所有数据数据项?').then(() => {
                    this.exportLoading = true;
                    // return iotCollectDataCountExportExcel(params);
                }).then(res => {
                    this.exportLoading = false;
                    this.$download.excel(res.data, '班次机台产能记录.xls');
                    /* if (res.data.status === 200) {
                        import('@/vendor/Export2Excel').then(excel => {
                            const tHeader = ['时间', '设备', '速度', '工序', '区域', '班次', '当班开始产量表数(米)', '当班实时产量表数(米)', '当班开始能耗(KW.H)表数', '当班实时能耗(KW.H)表数', '当班产量(米)', '当班产量(kg)', '当班能耗(KW.H)'];
                            const filterVal = ['belongDateTime', 'machineName', 'rotateSpeed', 'processName', 'workshopName', 'groupName', 'startOutputM', 'endOutputM', 'startEnergy', 'endEnergy', 'outputM', 'outputKg', 'energy'];
                            const list = JSON.parse(JSON.stringify(res.data.res)).map(item => {
                                return item;
                            });
                            const data = list.map(v => filterVal.map(j => {
                                return v[j];
                            }));
                            excel.export_json_to_excel({
                                header: tHeader,
                                data,
                                filename: `${this.$route.meta.title}`,
                                autoWidth: true,
                                bookType: 'xls'
                            });
                        });
                    }*/
                }).catch(() => {});
            },
            async getDependentData() {
                if (!this.searchParams.processCode) {
                    this.$set(this.searchParams, 'processCode', this.$store.state.user.userProcess.defaultProcessCode);
                }
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                if (!this.searchParams.workshopId) {
                    this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                }
                this.processList = this.$store.state.user.userProcess.processList;
                // this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
                // this.getCurrentTimeScheduleShift();
                this.getListRequest();
            }
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
                _this.runTime();
                _this.runData();
            });
        },
        beforeRouteLeave(to, from, next) {
            this.clearTimer();
            next();
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped>
</style>
